<template>
    <div>
        <nav-header v-on:clickedShowMenu="showMenu"></nav-header>
        <section class="storeDetail">
            <div class="container">
                <header class="header_detail">
                    <button class="icon close">Close</button>
                </header>
                <section class="body">
                    <div class="container">
                        <h2 class="fn org">{{ detail.abbr }}</h2>
                        <div class="adr">
                            <div class="street-address">{{ detail.address }}</div>
                            <span class="store_level">{{ detail.store_level }}</span>
                            <span class="store_date">{{ detail.province }}</span>
                            <span class="store_code">{{ detail.store_code }}</span>
                            <!-- react-text: 365 -->,<!-- /react-text -->
                        </div>
                        <a id="store-phone-62979" href="tel:021-66220092" class="phone"><img src="/static/images/web/icon-contact.svg">{{ detail.phone }}</a>
                        <a id="store-directions-62979" class="directions" target="_blank" href="http://uri.amap.com/marker?&amp;name=&amp;position=,&amp;src=mypage">
                            <img src="/static/images/web/icon-directions.svg"><span>获取路线</span>
                        </a>
                        <h3 class="caption"><span>营业时间</span></h3>
                        <div class="hours">
                            <div class="active">
                                <span class="day"><span>今天</span></span><span class="hours"><span>{{ detail.open_time }}</span><span>上午</span><span>至</span><span>{{ detail.close_time }}</span><span>下午</span></span>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </section>
    </div>
</template>

<script>

import NavHeader from '@/components/navHeader'
import request from "../utils/request";

export default {
    data(){
        return {
            detail: {},
            props: ['store_id'],
        }
    },
    mounted(){
        console.log('hello world');
        this.initData()
    },
    components: {
        NavHeader: NavHeader,
    },
    methods: {
        initData(){
            request({
                url: 'api/store/detail/' + this.props.store_id,
            }).then(res =>{
                if (res.code == 0) {
                    this.nearbyStores = res.data
                    this.map.remove(this.markers);
                    this.markers = [];
                    this.nearbyStores.forEach((item, index) => this.addMarker(item.lng, item.lat, index + 1, '#B0B0B0'))
                }
            })
        },
        closeMenu(){
            this.$emit("closeMenuOverlay");
        },
        showMenu(){
            this.$emit("showMenuOverlay");
        }
    }
}
</script>

<style scoped>

</style>
